<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 09:50:04
 * @LastEditTime: 2025-01-17 10:22:14
 * @Description: auth drawer
-->

<template>
	<div>
		<a-drawer v-model:open="localOpen" :getContainer="false" class="custom-drawer-class"
			root-class-name="root-drawer-class" title="角色权限" placement="right">
			<a-tree v-model:checkedKeys="checkedKeys" checkable :tree-data="originTreePermissions"
				:field-names="fieldNames">
				<!-- <template #title="{ name, key }">
					<span v-if="key === '0-0-1'" style="color: #1890ff">{{ name }}</span>
					<template v-else>{{ name }}</template>
</template> -->
			</a-tree>
			<template #footer>
				<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
				<a-button type="primary" @click="onSubmit">授权</a-button>
			</template>
		</a-drawer>
	</div>
	<contextHolder />
</template>

<script setup lang="ts">
import { ref, computed, defineComponent, watch } from 'vue';
import type { TreeProps } from 'ant-design-vue';
import { storeToRefs } from 'pinia';
import { usePermissionStore } from "@/stores";
import { useCustomNotification } from "@/hooks/common/useCustomNotification";

defineComponent({ name: "RoleDrawer" });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	id: {
		type: [Number, String],
		default: 0
	}
});
const emits = defineEmits(['update:modelValue']);
const localOpen = computed({
	get: () => props.modelValue,
	set: (val) => {
		emits('update:modelValue', val);
	}
});

// tree
const permissionStore = usePermissionStore();
const { originTreePermissions } = storeToRefs(permissionStore);
const fieldNames: typeof TreeProps['fieldNames'] = {
	children: 'children',
	title: 'title',
};
const checkedKeys = ref<string[]>([]);
const getMenuByRole = () => {
	checkedKeys.value = ['0', '41'];
	console.log('getMenuByRole', props.id);
};
watch(() => props.id, (newValue, oldValue) => {
	if (newValue && newValue !== oldValue) {
		getMenuByRole();
	}
});
watch(checkedKeys, () => {
	console.log('checkedKeys', checkedKeys.value);
});

const onClose = () => {
	localOpen.value = false;
};
const { contextHolder, openNotifation } = useCustomNotification();
const onSubmit = () => {
	// #TODO: 提交数据
	console.log('submit');
	openNotifation({ type: 'success', message: '授权成功' });
	onClose();
};
</script>

<style scoped lang="scss">
:deep(.root-drawer-class) {
	.ant-drawer-content-wrapper {
		width: 520px !important;
		.ant-drawer-footer {
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
